<template>
  <!-- 使用虚拟触发实现弹窗 在map中并不需要弹窗只需要传入结构即可 -->
  <el-popover
    :virtual-ref="buttonRef"
    placement="top-start"
    width="500"
    virtual-triggering
    trigger="hover"
  >
    <el-descriptions :title="data.type" :column="2" border size="small">
      <el-descriptions-item label="经纬度">{{
        data.longitudeAndLatitude
      }}</el-descriptions-item>
      <el-descriptions-item label="上行LQI">{{
        data.upLqi
      }}</el-descriptions-item>
      <el-descriptions-item label="mac">{{ data.mac }}</el-descriptions-item>
      <el-descriptions-item label="下行LQI">{{
        data.downLqi
      }}</el-descriptions-item>
      <el-descriptions-item label="上报间隔">{{
        data.reportInterval
      }}</el-descriptions-item>
      <el-descriptions-item label="值">{{ data.value }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{
        data.createTime
      }}</el-descriptions-item>
      <el-descriptions-item label="状态">{{
        data.status === 1 ? '正常' : '异常'
      }}</el-descriptions-item>
      <el-descriptions-item label="地址">{{
        actualLocation
      }}</el-descriptions-item>
    </el-descriptions>
  </el-popover>
</template>

<script setup>
import { defineProps, ref } from 'vue'
import bus from '@/mitt/index.js'
const props = defineProps(['currentSesnorInfo', 'buttonRef', 'actualLocation'])
const data = ref({
  upLqi: '',
  downLqi: '',
  mac: '',
  reportInterval: '',
  value: '',
  status: '',
  createTime: '',
  type: '',
  longitudeAndLatitude: '',
  position: ''
})

const initData = () => {
  bus.on('getCurrentNodeInfo', (res) => {
    data.value = res[0]
    console.log(res)
  })
}
initData()
</script>

<style lang="scss" scoped>
.showInfo {
  width: 500px;
  height: 100px;
}
</style>
